<!-- 优惠券 -->
<script setup>

import { reactive } from 'vue'
import { onLoad, onReachBottom } from '@dcloudio/uni-app'
// 数据
const data = reactive({
  current: 0,
  list: [],
  page: 1,
  status: 'loadmore'
})
// 首次加载
onLoad(options => {
  // getList()
})
// 监听页面滚动到底部
onReachBottom(() => {
  // getList()
})
// 查询充值记录列表
function getList() {
  console.log('优惠券页面', data.page)
  if (data.page >= 3) return
  data.status = 'loading'
  setTimeout(() => {
    for (let i = 0; i < 20; i++) {
      data.list.push({
        name: '优惠券名称',
        rule: '满¥100可用',
        amount: '100.00',
        time: '2024.02.30 09:00'
      })
    }
    data.page++
    data.status = data.page >= 3 ? 'nomore' : 'loadmore'
  }, 2000);
}
// tabs-list
const tabsList = [
  { name: '待使用', id: 1 },
  { name: '已使用', id: 2 },
  { name: '已过期', id: 3 },
]
// tabs change
function tabsChange(item, index) {
  data.current = index
  data.list = []
  data.page = 1
  getList()
}
</script>

<template>
  <view class="coupon-page">
    <!-- tabs -->
    <up-tabs :list="tabsList" :current="data.current" lineWidth="50rpx" lineHeight="6rpx" lineColor="#FFC870"
      :inactiveStyle="{
        fontWeight: 400,
        fontSize: '32rpx',
        color: '#333333'
      }" :activeStyle="{
        fontWeight: 500,
        fontSize: '32rpx',
        color: '#333333'
      }" @change="tabsChange"></up-tabs>

    <!-- 空状态 -->
    <up-empty v-if="data.list.length <= 0" mode="coupon" text="没有优惠券" marginTop="200rpx"></up-empty>
    <!-- 优惠券列表 -->
    <view v-else class="coupon-list">
      <view v-for="item in data.list" :key="item" class="coupon-item">
        <view class="left">
          <view class="amount-box">
            <view class="amount">
              <text class="unit">¥</text>
              <text class="num">{{ item.amount }}</text>
            </view>
            <view class="desc">
              {{ item.rule }}
            </view>
          </view>
          <view class="line"></view>
          <view class="info">
            <view class="name">{{ item.name }}</view>
            <view class="expire-time">{{ item.time }}到期</view>
          </view>
        </view>
        <view class="right">
          <view v-if="data.current == 0" class="btn canuse">立即使用</view>
          <view v-else class="btn notuse">
            {{ data.current == 1 ? '已使用' : '已过期' }}
          </view>
        </view>
      </view>

      <!-- 加载更多 -->
      <up-loadmore :status="data.status" :loading-text="`努力加载中`" :loadmore-text="'加载更多'" :nomore-text="'没有更多了'" />
    </view>
  </view>
</template>

<style lang="scss" scoped>
.coupon-page {
  padding: 50rpx 30rpx;
  padding-top: 20rpx;
  min-height: 100vh;
  background: #F9F9F9;

  // 优惠券列表
  & .coupon-list {
    & .coupon-item {
      position: relative;
      margin-top: 40rpx;
      padding: 30rpx;
      background: #FFFFFF;
      border-radius: 10rpx;

      & .left {
        display: flex;
        align-items: center;

        // 价格+ 规则描述
        & .amount-box {
          text-align: center;

          & .amount {
            & .unit {
              font-weight: 500;
              font-size: 28rpx;
              color: #F1B14B;
            }

            & .num {
              padding-left: 4rpx;
              font-weight: 500;
              font-size: 40rpx;
              color: #F1B14B;
            }
          }

          & .desc {
            margin-top: 10rpx;
            font-weight: 500;
            font-size: 26rpx;
            color: #F1B14B;
          }
        }

        // 线
        & .line {
          margin: 0 40rpx;
          width: 0rpx;
          height: 102rpx;
          border: 1rpx solid;
          border-image: linear-gradient(180deg, rgba(241, 177, 75, 0), rgba(241, 177, 75, 1), rgba(241, 177, 75, 0)) 2 2;
        }

        // 优惠券信息
        & .info {
          & .name {
            font-weight: 500;
            font-size: 28rpx;
            color: #333333;
          }

          & .expire-time {
            margin-top: 10rpx;
            font-weight: 400;
            font-size: 22rpx;
            color: #666666;
          }
        }
      }

      & .right {
        position: absolute;
        right: 20rpx;
        bottom: 30rpx;

        & .btn {
          width: 146rpx;
          height: 52rpx;
          line-height: 52rpx;
          text-align: center;
          font-weight: 500;
          font-size: 28rpx;
          border-radius: 10rpx;

          //可使用
          &.canuse {
            color: #FF6430;
            background: #FFC870;
          }

          // 不可使用
          &.notuse {
            color: #666666;
            background: #E5E5E5;
          }
        }
      }
    }
  }
}
</style>